<template>
  <div class="container">
    <div class="personal">
      <div class="content">
        <!-- 1.标题及图像说明 -->
        <div class="content-desc">
          <div class="title">上传照片</div>
          <div class="desc">照片要求为清晰无遮挡的人脸正脸照，格式为jpg/jpeg/png，最多可上传3张照片</div>
        </div>
        <!-- 2.图像区域 -->
        <ul class="content-image">
          <li
            v-for="(item, index) in image"
            :key="index"
          >
            <img :src="item.imageUrl" />
            <!-- 删除图标 -->
            <div class="delete-img">
              <i
                class="el-icon-delete"
                @click="deleteImage(index,item.id)"
              ></i>
            </div>
          </li>
          <!-- 控制最多可上传三张图片 -->
          <img
            class="upload-img"
            v-show="(this.photoCount<3)"
            :src="this.uploadImage"
            @click="uploadPhoto"
          />
        </ul>
        <input
          type="file"
          hidden
          ref="photoFile"
          @change="fileChange"
          style="display: none;"
        />
      </div>
      <!-- 上传图像前调整图像的尺寸 -->
      <el-dialog
        title="修改头像"
        :visible.sync="cropImageFormVisible"
        class="cropImageForm"
        width="50%"
      >
        <div class="img-crop">
          <!-- 1.截图区域 -->
          <div class="imgCrop-content">
            <div class="cropper-content">
              <!-- <VueCropper
                ref="cropper"
                :img="option.img"
                :outputSize="option.size"
                :outputType="option.outputType"
                :info="true"
                :full="option.full"
                :canMove="option.canMove"
                :canMoveBox="option.canMoveBox"
                :original="option.original"
                :autoCrop="option.autoCrop"
                :autoCropWidth="option.autoCropWidth"
                :autoCropHeight="option.autoCropHeight"
                :fixedBox="option.fixedBox"
                @realTime="realTime"
                @imgLoad="imgLoad"
              ></VueCropper> -->
            </div>
            <div class="preview-content">
              <div class="show-preview">
                <div
                  :style="previews.div"
                  class="preview"
                >
                  <img
                    :src="previews.url"
                    :style="previews.img"
                  />
                </div>
              </div>
              <p class="desc">预览图片</p>
            </div>
          </div>
          <!-- 2.操作按钮区域 -->
          <div class="btn-content">
            <input
              class="btn"
              type="button"
              value="+"
              title="放大"
              @click="changeScale(1)"
            />
            <input
              class="btn"
              type="button"
              style
              value="-"
              title="缩小"
              @click="changeScale(-1)"
            />
            <input
              class="btn"
              type="button"
              value="↺"
              title="左旋转"
              @click="rotateLeft"
            />
            <input
              class="btn"
              type="button"
              value="↻"
              title="右旋转"
              @click="rotateRight"
            />
            <input
              class="btn"
              type="button"
              value="↓"
              title="下载"
              @click="down('blob')"
            />
          </div>
        </div>
        <div class="btn-footer">
          <el-button
            @click="cropImageFormVisible= false"
            size="small"
          >取 消</el-button>
          <el-button
            type="danger"
            @click="submitPhoto"
            size="small"
          >点击上传</el-button>
        </div>
      </el-dialog>
      <!-- 删除对话框 -->
      <el-dialog
        title="删除"
        :visible.sync="deleteImageFormVisible"
        width="30%"
        class="deleteRoleForm"
      >
        <span>是否删除该照片?</span>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button
            size="mini"
            @click="deleteImageFormVisible = false"
          >取 消</el-button>
          <el-button
            size="mini"
            type="primary"
            @click="submitDeleteImage"
          >确 定</el-button>
        </span>
      </el-dialog>
    </div>

  </div>
</template>

<script>


// import { VueCropper } from "vue-cropper";
// const VueCropper = process.client ? require('vue-cropper') : ''

export default {
  data() {
    return {
      cropImageFormVisible: false,
      deleteImageFormVisible: false,
      deleteImgId: null,
      deleteIndex: null,
      image: [
        // {
        //   imageUrl:
        //     "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
        //   id: 1
        // },
        // {
        //   imageUrl:
        //     "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
        //   id: 2
        // },
        // {
        //   imageUrl:
        //     "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
        //   id: 3
        // }
      ],
      photoCount: 0,
      uploadImage: "",
      //剪切图片上传
      previews: {},
      option: {
        img: "",
        outputSize: 1, //剪切后的图片质量（0.1-1）
        full: false, //输出原图比例截图 props名full
        outputType: "png",
        canMove: true,
        original: false,
        canMoveBox: true,
        autoCrop: true,
        autoCropWidth: 150,
        autoCropHeight: 150,
        fixedBox: true
      },
      downImg: "#",
      host: "" //存放图像的服务器ip及端口
    };
  },
  // components: {
  //   VueCropper
  // },
  created() {
    //  uploadImage用于存放“添加照片”图片base64,
    this.uploadImage =
      "";
    this.photoCount = this.image.length;
    // *******查询系统参数配置--用于获取图像服务器ip及端口*****/
    let param1 = {
      token: this.$store.state.token,
      tag: "系统参数配置",
      currentPage: 1,
      pageSize: 10
    };
    // dictListQuery(param1).then(res => {
    //   var hostArray = res.data.result.records.filter(function(fh) {
    //     return fh.name === "faceImage_server_host";
    //   });
    //   this.host = hostArray[0].value;
    //   //******查询人脸图像信息********
    //   this.getImageData();
    // });
  },
  methods: {
    //******查询人脸图像信息********
    getImageData() {
      // this.image = [];
      let param = {
        token: this.$store.state.token,
        currentPage: 1,
        pageSize: 10
      };
      imageQuery(param).then(res => {
        if (res.data.respCode == "00000") {
          var urlArray = res.data.result.records;
          this.image = urlArray;
          for (var i = 0; i < urlArray.length; i++) {
            this.image[i].imageUrl = this.host + urlArray[i].url;
          }
          this.photoCount = urlArray.length;
        } else {
          this.$message.error(res.data.respDesc);
        }
      });
    },
    // 本地上传头像
    uploadPhoto() {
      this.$refs.photoFile.click();
    },
    // 修改头像
    fileChange(e) {
      console.log("输出files:", this.$refs.photoFile.files);
      let file = this.$refs.photoFile.files[0];
      if (/.(png|jpg|jpeg|JPG|JPEG)$/.test(file.name)) {
        let fr = new FileReader();
        fr.readAsDataURL(file);
        fr.onload = e => {
          // 将图像置于裁剪框中
          console.log("输出e:", e);
          this.option.img = e.target.result;
          this.cropImageFormVisible = true;
          this.$refs.photoFile.value = "";
        };
      } else {
        this.$message({
          message: "请选择符合格式要求的图片",
          type: "warning"
        });
        this.$refs.photoFile.value = "";
      }
    },
    // 上传图像
    submitPhoto() {
      this.$refs.cropper.getCropData(data => {
        let param = {
          token: this.$store.state.token,
          image: data
        };
        imageAdd(param).then(res => {
          // console.log("提交新增图片:", res);
          if (res.data.respCode == "00000") {
            this.$message.success(res.data.respDesc);
            this.photoCount++;
            this.cropImageFormVisible = false;
            this.getImageData();
          } else {
            this.$message.error(res.data.respDesc);
          }
        });
      });
    },
    // 删除图片
    deleteImage(index, id) {
      this.deleteImgId = id;
      this.deleteIndex = index;
      this.deleteImageFormVisible = true;
    },
    // 提交删除图片
    submitDeleteImage() {
      this.deleteImageFormVisible = false;
      let param = {
        token: this.$store.state.token,
        imageId: this.deleteImgId
      };
      imageDelete(param).then(res => {
        // console.log(" 提交删除:", res);
        if (res.data.respCode == "00000") {
          // this.image.splice(this.deleteIndex, 1);
          this.photoCount--;
          this.$message.success(res.data.respDesc);
        } else {
          this.$message.error(res.data.respDesc);
        }
        this.getImageData();
      });
    },
    //放大/缩小
    changeScale(num) {
      num = num || 1;
      this.$refs.cropper.changeScale(num);
    },
    //左旋转
    rotateLeft() {
      this.$refs.cropper.rotateLeft();
    },
    //右旋转
    rotateRight() {
      this.$refs.cropper.rotateRight();
    },
    // 实时预览函数
    realTime(data) {
      this.previews = data;
    },
    //下载图片
    down(type) {
      var aLink = document.createElement("a");
      aLink.download = "author-img";
      if (type === "blob") {
        this.$refs.cropper.getCropBlob(data => {
          this.downImg = window.URL.createObjectURL(data);
          aLink.href = window.URL.createObjectURL(data);
          aLink.click();
        });
      } else {
        this.$refs.cropper.getCropData(data => {
          this.downImg = data;
          aLink.href = data;
          aLink.click();
        });
      }
    },
    imgLoad(msg) { }
  }

};
</script>

<style lang="scss">
.container {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 15px;
  width: 78.5%;
  height: 706px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.03);
  opacity: 1;
  border-radius: 5px;
}

.title {
  font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}
.personal {
  margin: 10px 0;
  padding: 10px;
  background: #f0f0f0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow-y: hidden;
  border-radius: 3px;
  padding-bottom: 20px;
  .content {
    background-color: #fff;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    padding: 10px;
    // overflow-y: scroll;
    overflow: hidden;
    display: flex;
    padding: 10px 0;
    flex-direction: column;
    //  1.标题及图像说明
    .content-desc {
      margin: 0px 10px;
      .title {
        font-size: 16px;
        border-left: 5px solid #2d8cf0;
        padding-left: 10px;
        margin-bottom: 16px;
      }
      .desc {
        margin-left: 18px;
      }
    }
    // 2.图像区域
    .content-image {
      display: flex;
      justify-content: rows;
      margin: 20px 30px;
      li {
        width: 180px;
        height: 180px;
        margin-right: 20px;
        position: relative;
        .delete-img {
          display: none;
        }
        &:hover {
          .delete-img {
            display: block;
            position: absolute;
            width: 180px;
            height: 40px;
            line-height: 40px;
            left: 0px;
            top: 140px;
            background: rgba(59, 60, 61, 0.5);
            // box-sizing: content-box;
            z-index: 999;
            cursor: pointer;
            text-align: right;
            i {
              margin: 8px 10px 0 0;
              display: block;
              font-size: 24px;
              color: white;
            }
          }
        }
      }
      img {
        width: 180px;
        height: 180px;
        border-radius: 4px;
      }
      .upload-img:hover {
        border: 1px dashed #92cccc;
      }
    }
  }
  // 裁剪图像对话框
  .cropImageForm {
    .img-crop {
      // 1.截图区域
      .imgCrop-content {
        margin: 0 20px;
        display: flex;
        display: -webkit-flex;
        justify-content: flex-start;
        -webkit-justify-content: flex-start;
        .cropper-content {
          width: 350px;
          height: 350px;
          margin-right: 40px;
        }
        .preview-content {
          .show-preview {
            // border: 1px solid #ccc;
            box-sizing: border-box;
            width: 150px;
            height: 150px;
            overflow: hidden;
            flex: 1;
            -webkit-flex: 1;
            display: flex;
            display: -webkit-flex;
            justify-content: center;
            -webkit-justify-content: center;
            .preview {
              overflow: hidden;
              border-radius: 50%;
              border: 1px solid #cccccc;
              background: #fff;
              margin-left: 0px;
            }
          }
          .desc {
            margin-top: 10px;
            text-align: center;
          }
          .el-button {
            margin: 10px 40px;
          }
        }
      }
      // 2.操作按钮区域
      .btn-content {
        width: 350px;
        margin: 10px 20px;
        text-align: center;
        // #uploads {
        //   position: absolute;
        //   clip: rect(0 0 0 0);
        // }
        .btn {
          height: 32px;
          width: 32px;
          font-size: 20px;
          margin: 3px 5px;
          background-color: #fff;
          border: 1px solid #999;
          border-radius: 4px;
        }
      }
    }
    .btn-footer {
      width: 100%;
      text-align: right;
      padding-right: 20px;
      margin-top: -20px;
    }
  }
}
</style>
